<template>
    <div class="tableBox">
        <el-table v-bind="$attrs" style="width:100%" border stripe
            :header-cell-style="{ textAlign: 'left', backgroundColor: '#fafafa', color: '#909399', fontSize: '12px' }"
            @selection-change="(selection)=>{$emit('selection-change',selection)}"
            @sort-change="({column,prop,order})=>{$emit('sort-change',{ column,prop,order })}">
            <el-table-column type="index" :fixed="indexFixed" v-if="showIndex && columns.length"></el-table-column>
            <el-table-column type="selection" fixed="left" :selectable="canDisabled" v-if="showSelect && columns.length"></el-table-column>
            <el-table-column v-for="(item, index) in columns" :min-width="item.minWidth" :key="`item_${index}`" :prop="item.prop" :label="item.label"
                :sortable="item.sortable" :fixed="item.fixed" :show-overflow-tooltip="item.showOverflowTooltip">
                <template slot-scope="{ row }">
                    <render-cell v-if="item.render" :row="row" :prop="item.prop" :render="item.render"></render-cell>
                    <span v-else>{{ item.formatter ? item.formatter(row, row[item.prop]) : row[item.prop] }}</span>
                </template>
            </el-table-column>
        </el-table>
        <div v-if="pagination">
            <el-pagination :layout="layout" :page-sizes="sizeArray" :current-page="pageNum" :page-size="pageSize" :total="total"
                @size-change="handlePageizeChange" @current-change="handlePageCurrentChange">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import renderCell from './RenderCell'
export default {
    components: { [renderCell.name]: renderCell },
    props: {
        columns: {
            type: Array,
            default: () => [],
        },
        /* 是否显示 index */
        showIndex: {
            type: Boolean,
            default: false,
        },
        /* 是否显示 checkbox */
        showSelect: {
            type: Boolean,
            default: false,
        },
        /* 是否显示 checkbox禁止选中 */
        canDisabled: {
            type: Boolean,
            default: false,
        },
        /* 是否显示 分页 */
        pagination: {
            type: Boolean,
            default: false,
        },
        /* 分页包含的功能 */
        layout: {
            type: String,
            default: 'sizes, prev, pager, next',
        },
        /* 分页切换数值 */
        sizeArray: {
            type: Array,
            default: () => [10, 20, 50, 100],
        },
        /* 页码 */
        pageNum: {
            type: Number,
            default: 1,
        },
        /* 页面大小 */
        pageSize: {
            type: Number,
            default: 10,
        },
        /* total */
        total: {
            type: Number,
            default: 1,
        },
    },

    methods: {
        handlePageSizeChange(size) {
            this.$emit('size-change', size)
        },
        handlePageCurrentChange(num) {
            this.$emit('current-change', num)
        },
    },
}
</script>

<style lang="less" scoped>
.tableBox {
    background: #fff;
    border-radius: 2px;
    box-sizing: border-box;
    margin-bottom: 40px;
}
/deep/.el-table th.gutter {
    display: table-cell !important;
}
/deep/.el-table td {
    padding: 0;
}

/deep/ .cell {
    font-size: 12px;
    & > span {
        color: #303133;
    }
}
</style>